<script setup>
import { ref,onMounted } from 'vue'

const name = ref("hello Vue!")
const activeIndex = ref("1")
const isLoggedIn = ref(false)
//const wenzhangs = ref([
//  {title:'Vue3.0新特性使用攻略',time:"2024-10-28"},
//  {title:'Vue3.0脚手架使用详解',time:"2024-10-25"},
//  {title:'ElementPlus框架应用场景',time:"2024-10-17"},
//  {title:'5款独立开发者必备神器',time:"2024-10-12"}
//])
// const kechengs = ref([
//   {title:"零基础学JavaScript",price:49},
//   {title:"Vue.js从入门到实战",price:199},
//   {title:"深入浅出状态管理",price:29},
//   {title:"说透大厂前端项目面试题",price:69}
// ])
// const productLists = ref([
//   { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '/images/product01.png' },
//   { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '/images/product02.png' },
//   { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '/images/product03.png' },
//   { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '/images/product04.png' },
//   { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '/images/product05.png' },
//   { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '/images/product06.png' },
//   //{ type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '/images/product07.png' },
//   //{ type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '/images/product08.png' },
// ])

const loginForm = () => {
  // 登录逻辑
}

const wenzhangs= ref([]);
onMounted(() => {
  getData()
})
const getData = async() => {
  setTimeout(() => {
  // 获取文章列表
  wenzhangs.value =[
    {title:'Vue3.0新特性使用攻略',time:"2024-10-28"},
    {title:'Vue3.0脚手架使用详解',time:"2024-10-25"},
    {title:'ElementPlus框架应用场景',time:"2024-10-17"},
    {title:'5款独立开发者必备神器',time:"2024-10-12"}
  ]
 },1000)
}

const kechengs= ref([]);
onMounted(() => {
  getData1()
})
const getData1 = async() => {
  setTimeout(() => {
  // 获取文章列表
  kechengs.value =[
    {title:"零基础学JavaScript",price:49},
    {title:"Vue.js从入门到实战",price:199},
    {title:"深入浅出状态管理",price:29},
    {title:"说透大厂前端项目面试题",price:69}
  ]
 },1000)
}

const productLists= ref([]);
onMounted(() => {
  getData2()
})
const getData2 = async() => {
  setTimeout(() => {
  // 获取文章列表
  productLists.value =[
    { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '/images/product01.png' },
    { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '/images/product02.png' },
    { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '/images/product03.png' },
    { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '/images/product04.png' },
    { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '/images/product05.png' },
    { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '/images/product06.png' },
  ]
 },1000)
}
</script>

<template>
<!-- <el-container>
    <el-header>
      <el-row>
        <el-col
          :span="4"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <img src="/images/logo.png" style="height: 60px" />
          <h2 style="padding-left: 4px">技术社区</h2>
        </el-col>
        <el-col :span="8">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            style="border-bottom: none !important"
          >
            <el-menu-item index="1">
                <router-link to="/">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">文章</el-menu-item>
            <el-menu-item index="3">课程</el-menu-item>
            <el-menu-item index="4">
              <router-link to="/mall">商城</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col
          :span="8"
          style="height: 60px; line-height: 60px"
          class="hidden-only-sm"
        >
          <el-input placeholder="请输入关键字" />
        </el-col>
        <el-col
          :span="4"
          style="text-align: right; height: 60px; line-height: 60px"
          class="hidden-only-sm;"
        >
        <div v-if="!isLoggedIn">
          <el-link type="primary">
            <router-link to="/login">登录</router-link>
          </el-link>
          <el-link type="primary" style="padding-left: 4px">
            <router-link to="/reg">注册</router-link>
          </el-link>
        </div>
        <div v-else>
          <img src="/images/avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
          <el-link type="primary" style="padding-left: 4px">
            <router-link to="/person">个人中心</router-link>
          </el-link>
        </div>
        </el-col>
      </el-row>
    </el-header>
  </el-container> -->
  <el-container style="width: 80%;margin: 0 auto;">
    <el-main>
      <el-carousel height="420px">
        <el-carousel-item>
          <img src="/images/carousel1.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel2.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel3.png" />
        </el-carousel-item>
      </el-carousel>
      <el-row style="padding-top: 20px">
        <el-col :span="6">
          <div>
            <el-link type="primary">热门文章</el-link>
            <el-skeleton :rows="8" animated :loading="!wenzhangs.length">
             <div v-for="wenzhang in wenzhangs" :key="wenzhang.title" >
              <p>{{wenzhang.title}}</p>
              <p style="font-size: 10px; color: greenyellow;">{{wenzhang.time}}</p>
             </div>
            </el-skeleton>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button> 
        </el-col>
        <el-col :span="6">
          <div>
            <el-link type="primary">热门课程</el-link>
            <el-skeleton :rows="8" animated :loading="!kechengs.length">
             <div v-for="kecheng in kechengs" :key="kecheng.title">
              <p>{{kecheng.title}}</p>
              <p style="font-size: 10px; color: red;">￥{{kecheng.price}}</p>
             </div>
            </el-skeleton>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button> 
        </el-col>
        <el-col :span="6">
          <div>
            <el-link type="primary">热门商品</el-link>
            <el-carousel>
              <el-skeleton-item variant="image" style="width: 100%; height: 100%;" animated :loading="!productLists.length" />
              <el-carousel-item v-for="productList in productLists.slice(0, 6)" :key="productList.name">
                <img :src="productList.img" />
              </el-carousel-item>
            </el-carousel>
          </div> 
        </el-col>
        <el-col :span="2">
          <el-button @click="loginForm">
            查看更多
          </el-button>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <!-- <el-container>
        <el-footer>
      <el-row>
        <el-col
          :xs="24"
          :lg="8"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <div>
            <img src="/images/logo.png" style="height: 100px" />
          </div>
          <div>
            <h2 style="padding-left: 4px">技术社区</h2>
            <p style="padding-left: 4px">
              致力构建一个专业的IT技术交流社区
            </p>
          </div>
        </el-col>
        <el-col
          :xs="24"
          :lg="10"
          style="
            display: flex;
            flex-direction: column;
            text-align: center;
            padding-top: 3%;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              gap: 70px;
              padding-left: 15px;
            "
          >
            <el-link type="primary">首页</el-link>
            <el-link type="primary">咨询</el-link>
            <el-link type="primary">课程</el-link>
            <el-link type="primary">商城</el-link>
          </div>
          <div style="display: flex; flex-direction: row; gap: 43px">
            <el-link type="primary">关于我们</el-link>
            <el-link type="primary">使用手册</el-link>
            <el-link type="primary">隐私条款</el-link>
            <el-link type="primary">建议反馈</el-link>
          </div>
        </el-col>
        <el-col :xs="24" :lg="6">
          <div>
            <h2>联系我们</h2>
            <p>电话：123456789</p>
            <p>邮箱：software@develop.com</p>
          </div>
        </el-col>
        <el-col :xs="24" :lg="24" style="background-color: deepskyblue">
          <p style="text-align: center">软件开发工作室版权所有</p>
        </el-col>
      </el-row>
    </el-footer>
    </el-container> -->
</template>

<style scoped>
.el-carousel__container img {
  width: 100%;
  height: 100%;
}
</style>
